<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <link href="css/common.css" rel="stylesheet" type="text/css"/>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/user_style.css" rel="stylesheet" type="text/css"/>
    <link href="skins/all.css" rel="stylesheet" type="text/css"/>
    <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
    <script src="js/common_js.js" type="text/javascript"></script>
    <script src="js/footer.js" type="text/javascript"></script>
    <script src="layer/layer.js" type="text/javascript"></script>
    <script src="js/iCheck.js" type="text/javascript"></script>
    <script src="js/custom.js" type="text/javascript"></script>

    <!--自定义工具-->
    <script src="js/HttpUtil.js"></script>
    <!--参数校验工具-->
    <script src="validation-1.19.2/jquery.validate.min.js"></script>
    <script src="validation-1.19.2/localization/messages_zh.min.js"></script>
    <!--导入 vue 包-->
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <title>订单管理</title>
</head>

<body>
<head>
    <div id="header_top">
        <div id="top">
            <div class="Inside_pages">
                <div class="Collection"><a href="login.html" class="green">请登录</a> <a href="register.html"
                                                                                      class="green">免费注册</a></div>
                <div class="hd_top_manu clearfix">
                    <ul class="clearfix">
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="user_center.html">用户中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="message_center.html">消息中心</a></li>
                        <li class="hd_menu_tit" data-addclass="hd_menu_hover"><a href="Cart.html">我的购物车</a></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="header" class="header page_style">
            <div class="logo"><a href="index.html"><img src="images/logo.png"/></a></div>

            <!--结束图层-->
            <div class="Search">
                <div class="search_list">
                    <ul>
                        <li class="current"><a href="#">产品</a></li>
                        <li><a href="#">信息</a></li>
                    </ul>
                </div>
                <div class="clear search_cur">
                    <input name="searchName" id="searchName" class="search_box" onkeydown="keyDownSearch()" type="text">
                    <input name="" type="submit" value="搜 索" class="Search_btn"/>
                </div>
                <div class="clear hotword">热门搜索词：香醋&nbsp;&nbsp;&nbsp;茶叶&nbsp;&nbsp;&nbsp;草莓&nbsp;&nbsp;&nbsp;葡萄&nbsp;&nbsp;&nbsp;菜油</div>
            </div>

        </div>

        <!--菜单栏-->
        <div class="Navigation" id="Navigation"  style="padding-left: 420px;">
            <ul class="Navigation_name">
                <li><a href="index.html">首页</a></li>
                <li class="hour"><a href="半小时圈主页.html">半小时生活圈</a></li>
                <li><a href="产品-产品列表(预售).html">预售专区</a><em class="hot_icon"></em></li>
                <li><a href="店铺首页.html">好评商户</a></li>
                <li><a href="goodsList.html">热销活动</a></li>
                <li><a href="">联系我们</a></li>
            </ul>
        </div>
        <script>$("#Navigation").slide({titCell: ".Navigation_name li", trigger: "click"});</script>
    </div>
</head>
<div class="user_style clearfix">
    <div class="user_center clearfix">
        <div class="left_style">
            <div class="menu_style">
                <div class="user_title"><a href="user_center.html">用户中心</a></div>
                <div class="user_Head">
                    <div class="user_portrait">
                        <a href="#" title="修改头像" class="btn_link"></a> <img src="images/people.png">
                        <div class="background_img"></div>
                    </div>
                    <div class="user_name">
                        <p><span class="name">化海天堂</span><a href="update_password.html">[修改密码]</a></p>
                        <p>访问时间：2016-1-21 10:23</p>
                    </div>
                </div>
                <!--菜单列表图层-->
                <div class="sideMen">
                    <dl class="accountSideOption1">
                        <dt class="transaction_manage"><em class="icon_1"></em>订单管理</dt>
                        <dd>
                            <ul>
                                <li><a href="user_order.html">我的订单</a></li>
                                <li><a href="address.html">收货地址</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="accountSideOption1">
                        <dt class="transaction_manage"><em class="icon_2"></em>会员管理</dt>
                        <dd>
                            <ul>
                                <li><a href="user_information.html">用户信息</a></li>
                                <li><a href="#">我的收藏</a></li>
                                <li><a href="#">我的留言</a></li>
                                <li><a href="#">我的评论</a></li>
                            </ul>
                        </dd>
                    </dl>
                    <dl class="accountSideOption1">
                        <dt class="transaction_manage"><em class="icon_3"></em>账户管理</dt>
                        <dd>
                            <ul>
                                <li><a href="user_account_management.html">账户余额</a></li>
                                <li><a href="用户中心-消费记录.html">消费记录</a></li>
                                <li><a href="#">跟踪包裹</a></li>
                                <li><a href="user_account_management.html">资金管理</a></li>
                            </ul>
                        </dd>
                    </dl>
                </div>
                <script>jQuery(".sideMen").slide({
                    titCell: "dt", targetCell: "dd", trigger: "click"
                    , defaultIndex: 0, effect: "slideDown", delayTime: 300, returnDefault: true
                });</script>
            </div>
        </div>
        <!--右侧样式-->
        <div class="right_style" id="order_show">
            <div class="title_style"><em></em>订单管理</div>
            <div class="Order_form_style">
                <div class="Order_form_filter">
                    <a style="cursor: pointer;" name="tp" class="on tp" @click="getGoodsOrderList()">全部订单（{{ one }}）</a>
                    <a style="cursor: pointer;" name="tp" class="tp" @click="queryState('待付款',0)">待付款（{{ two }}）</a>
                    <a style="cursor: pointer;" name="tp" class="tp" @click="queryState('待发货',1)">待发货（{{ three }}）</a>
                    <a style="cursor: pointer;" name="tp" class="tp" @click="queryState('待收货',2)">待收货（{{ four }}）</a>
                    <a style="cursor: pointer;" name="tp" class="tp" @click="queryState('待评论',3)">评论/退货（{{ five }}）</a>
                    <a style="cursor: pointer;" name="tp" class="tp" @click="queryState('已完成',4)">交易成功（{{ six }}）</a>
                    <a style="cursor: pointer;" name="tp" class="tp" @click="queryState('关闭',5)">交易关闭（{{ seven }}）</a>
                </div>

                <script>
                    let sj_btn=[];
                    sj_btn=document.getElementsByClassName('tp');
                    console.log(sj_btn);
                    function func(i) {
                        sj_btn[0].className="tp"
                        sj_btn[1].className="tp"
                        sj_btn[2].className="tp"
                        sj_btn[3].className="tp"
                        sj_btn[4].className="tp"
                        sj_btn[5].className="tp"
                        sj_btn[6].className="tp"
                        sj_btn[i].className="tp on"
                    }
                </script>



                <div class="Order_form_list">
                    <table>
                        <thead>
                        <tr>
                            <td class="list_name_title0">商品</td>
                            <td class="list_name_title1">单价(元)</td>
                            <td class="list_name_title2">数量</td>
                            <td class="list_name_title4">实付款(元)</td>
                            <td class="list_name_title5">订单状态</td>
                            <td class="list_name_title6">操作</td>
                        </tr>
                        </thead>


                        <tbody v-for="(item,index) in orders_list" v-if="item.good.length != 0">

                        <tr class="Order_info">
                            <td colspan="6" class="Order_form_time"><input name="" type="checkbox" value=""
                                                                           class="checkbox"/>下单时间：{{ item.createTime }} |
                                订单号：{{ item.orderNumber }} <em></em></td>
                        </tr>
                        <tr class="Order_Details">
                            <td colspan="3">
                                <table class="Order_product_style">
                                    <tbody>
                                    <tr v-for="ite in item.good">
                                        <td>
                                            <div class="product_name clearfix">
                                                <a href="#" class="product_img"><img :src="ite.goodImg" width="80px"
                                                                                     height="80px"></a>
                                                <a href="3" class="p_name" style="width: 120px;height: 50px;display:block;
               overflow:hidden;text-overflow:ellipsis;">{{ ite.goodName }}</a>
<!--                                                <p class="specification">礼盒装20个/盒</p>-->
                                            </div>
                                        </td>
                                        <td>{{ ite.goodPrice }}</td>
                                        <td>{{ ite.goodCount }}</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </td>
                            <td class="split_line">{{ item.money }}</td>

                            <!--等待买家付款-->
                                <td class="split_line" v-if="item.orderStatus==0">
                                    <p style="color:#F30">等待买家付款</p>
                                </td>
                                <td class="operating" v-if="item.orderStatus==0">
                                    <a href="#">查看订单</a>
                                    <a href="#">查看物流</a>
                                    <a href="#">联系客服</a>
                                    <a style="cursor: pointer;" class="Delivery_btn" @click="goPay(item)">去付款</a>
                                </td>

                            <!--已发货，待收货-->
                                <td class="split_line" v-if="item.orderStatus==1">
                                    <p style="color:#F30">买家已付款</p>
                                    <p style="color:#CCC">等待卖家发货</p>
                                </td>
                                <td class="operating" v-if="item.orderStatus==1">
                                    <a href="#">查看订单</a>
                                    <a href="#">查看物流</a>
                                    <a href="#">联系客服</a>
                                    <!--<a style="cursor: pointer;" class="Delivery_btn" @click="UpdateOr(2, item)">确认发货</a>-->
                                </td>

                            <!--商家已发货-->
                                <td class="split_line" v-if="item.orderStatus==2">
                                    <p style="color:#F30">已发货，待收货</p>
                                </td>
                                <td class="operating" v-if="item.orderStatus==2">
                                    <a href="#">查看订单</a>
                                    <a href="#">在线客服</a>
                                    <a style="cursor: pointer;" class="Delivery_btn" @click="UpdateOr(3, item)">确认收货</a>
                                </td>

                            <!--确认收货-->
                                <td class="split_line" v-if="item.orderStatus==3">
                                    <p style="color:#F33">确认收货</p>
                                    <p style="color:#CCC">买家未评价</p>
                                </td>
                                <td class="operating" v-if="item.orderStatus==3">
                                    <a href="#">查看详细</a>
                                    <a href="#">在线客服</a>
                                    <a style="cursor: pointer;" class="Refund_btn" @click="UpdateTe(item)">评价商品</a>
                                </td>

                            <!--交易成功-->
                                <td class="split_line" v-if="item.orderStatus==4">
                                    <p style="color:#F30">交易已成功</p>
                                    <p style="color:#999">已评论</p>
                                </td>
                                <td class="operating" v-if="item.orderStatus==4">
                                    <a href="#">查看订单</a>
                                    <a href="#">联系客服</a>
                                    <a href="#" @click="commentDelete(item)">删除</a>
                                </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <script>
            $(document).ready(function () {
                $('.Order_form_style input').iCheck({
                    checkboxClass: 'icheckbox_flat-green',
                    radioClass: 'iradio_flat-green'
                });
            });
        </script>
    </div>
</div>

</div>
<!--网站地图-->
<div class="fri-link-bg clearfix">
    <div class="fri-link">
        <div class="logo left margin-r20"><img src="images/fo-logo.jpg" width="152" height="81"/></div>
        <div class="left"><img src="images/qd.jpg" width="90" height="90"/>
            <p>扫描下载APP</p>
        </div>
        <div class="">
            <dl>
                <dt>新手上路</dt>
                <dd><a href="#">售后流程</a></dd>
                <dd><a href="#">购物流程</a></dd>
                <dd><a href="#">订购方式</a></dd>
                <dd><a href="#">隐私声明 </a></dd>
                <dd><a href="#">推荐分享说明 </a></dd>
            </dl>
            <dl>
                <dt>配送与支付</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>售后保障</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>支付方式</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
                <dt>帮助中心</dt>
                <dd><a href="#">保险需求测试</a></dd>
                <dd><a href="#">专题及活动</a></dd>
                <dd><a href="#">挑选保险产品</a></dd>
                <dd><a href="#">常见问题 </a></dd>
            </dl>
            <dl>
            </dl>
        </div>
    </div>
</div>
<!--网站地图END-->
<!--网站页脚-->
<div class="copyright">
    <div class="copyright-bg">
        <div class="hotline">为生活充电在线 <span>招商热线：****-********</span> 客服热线：400-******</div>
        <div class="hotline co-ph">
            <p>版权所有Copyright ©***************</p>
            <p>*ICP备***************号 不良信息举报</p>
            <p>总机电话：****-*********/194/195/196 客服电话：4000****** 传 真：********

                <a href="http://www.mycodes.net/" target="_blank">源码之家</a></p>
        </div>
    </div>
</div>
</body>
</html>

<script>

    let user = getCookie("userMassage");
    if (user==null){
        alert("用户未登录，请登录");
        location.href='/views/login.html';
    }

    var vm1 = new Vue({
        el: '#order_show',
        data: {
            orders_list: [],      /*订单所有信息*/
            nextMas: [],
            oneOrder: [],
            userMessage: [],      /*用户信息*/
            one: [],
            two: [],
            three: [],
            four: [],
            five: [],
            six: [],
            seven:[]

        },
        methods: {
            //ajax获取用户订单列表
            getGoodsOrderList: function () {
                let vue_quote = this;
                //获取后台数据
                let url = "order/searchOrderByUserId.do";

                //获取用户登录信息
                var cookie = getCookie("userMassage");
                var user = JSON.parse(cookie);
                vue_quote.userMessage=user;
                let params =
                    {userId:this.userMessage.userID}


                //获取所有信息
                this.queryState('待付款',0);
                this.queryState('待发货',1);
                this.queryState('待收货',2);
                this.queryState('待评论',3);
                this.queryState('已完成',4);
                this.queryState('关闭',5);

                /**
                 * 发起POST方式的ajax请求，获取后台数据
                 * function 为请求完成之后调用的回调函数(请求完成后要做的事情)
                 */
                postWithJson(url, params, function (data) {
                    console.log(data);
                    vue_quote.one=data.length;
                    vue_quote.orders_list = data;
                    console.log(vue_quote.orders_list);
                });
                func(0);
            },

            /*确认收货按钮*/
            UpdateOr: function (sta, ODate) {
                let orderNumber = ODate.orderNumber;
                let params={
                    userId:this.userMessage.userID,
                    orderNumber:orderNumber,
                    orderStatus:sta
                }

                let url = "/order/updateOrder.do";

                postWithJson(url,params,function (data) {
                    console.log(data);
                    location.href=appendBeforeHost("user_order.html");
                });
            },

            /*评论按钮*/
            UpdateTe: function (ODate) {
                let orderNumber = ODate.orderNumber;
                location.href=appendBeforeHost("/comment.html?orderNumber="+orderNumber)
            },

            /*去付款按钮*/
            goPay: function (ODate) {
                let orderNumber = ODate.orderNumber;

                localStorage.setItem("orderNumber",orderNumber);
                localStorage.setItem("addOrder", JSON.stringify(ODate));
                location.href='/views/user_view/placeOrder.html';
            },

            /*点击删除，删除订单内容，记录不会删除*/
            commentDelete: function (ODate) {
                let url = "order/deleteOrder.do";
                let orderNumber = ODate.orderNumber;
                let param={orderNumber:orderNumber};
                postWithJson(url,param,function (data) {
                    console.log(data);
                    location.href=appendBeforeHost("user_order.html");
                });

                this.UpdateOr("关闭", ODate)
            },

            /*查询订单状态*/
            queryState: function (ODate,i) {
                let vue_quote = this;
                //获取后台数据
                let url = "/order/searchOrderStatus.do";
                let params = {
                    userId:this.userMessage.userID,
                    orderStatus:i
                };


                /**
                 * 发起POST方式的ajax请求，获取后台数据
                 * function 为请求完成之后调用的回调函数(请求完成后要做的事情)
                 */
                postWithJson(url, params, function (data) {
                    console.log(data);
                    if (i==0)
                        vue_quote.two=data.length;
                    else if (i==1){
                        vue_quote.three=data.length;
                    }else if (i==2){
                        vue_quote.four=data.length;
                    }else if (i==3){
                        vue_quote.five=data.length;
                    }else if (i==4){
                        vue_quote.six=data.length;
                    }else if (i==5){
                        vue_quote.seven=data.length;
                    };
                    vue_quote.orders_list = data;
                    console.log(vue_quote.orders_list);
                });
                func(i+1);
            },
        },

        /**页面加载完成后调用*/
        mounted: function () {
            this.getGoodsOrderList();
        }
    });

</script>